<template>
  <div class="subject-tabs">
    <div class="tab-header">
      <div v-for="tab in tabs" :key="tab.name" :class="['tab-item', { active: activeTab === tab.name }]"
        @click="handleChangeTab(tab) ">
        {{ tab.label }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';
import { useLoginStore } from '@/stores/Login.js'
const LoginStore=useLoginStore();
const props = defineProps({
  tabs: {
    type: Array,
    required: true
  },
  selectedTab: {
    type: String,
    required: false,
    default: ''
  }
});
console.log(props.tabs)


const tabs = ref(props.tabs);
const activeTab = ref(props.selectedTab);
const handleChangeTab=(tab)=>{
  activeTab.value = tab.name;
  LoginStore.handleActiveTab(tab.name);
}
</script>

<style scoped>
.subject-tabs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tab {
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 20px;
  transition: background-color 0.3s ease;
}
.tab-item {
    color: #999999;
    font-size: 18px;
    font-weight: 400;
    cursor: pointer;
    margin-right: 25px;
}

.active {

    position: relative;
    font-size: 18px;
    font-weight: 600;
    color: #333333;

    &::before {
        content: "";
        display: block;
        position: absolute;
        width: 24px;
        height: 24px;
        background: url(../static/Vector.png) no-repeat center/100%;
        right: 0px;

    }
}


</style>
